<!DOCTYPE HTML>
<html>
<head>
	<title>Transition Template</title>
	<link rel="stylesheet" type="text/css" href="styles.css" />
	<script type="text/javascript" src="js/main.js"></script>
	<script type="text/javascript" src="js/jquery.js"></script> 
	<script type="text/javascript" src="js/m-x.js"></script>
	<script type="text/javascript" src="js/panorama.js"></script>
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
</head>

<body>
<header>
</header>

<img src="images/walking.jpg" alt="Put away your binoculars" />
<p>
<audio id="chirp" src="images/birdchirp.mp3" preload="auto" controls="controls">Your browser does not support the audio element.</audio>
</p>

<script language="javascript" type="text/javascript">

/*on window load, alertChirp() will automatically play bird chirp audio after 10 sec., then automatically redirects to 1st panorama after 5 seconds of audio play aka 15 seconds after the page has loaded*/
	window.onload = function() {
		setTimeout ( "alertChirp()", 10000 );
		setTimeout ( "directToPanorama()", 15000);
	}
	
	function alertChirp() {
		var ifr=document.createElement("iframe");
		ifr.setAttribute('src', "images/birdchirp.mp3");
		ifr.setAttribute('width', '1px');
		ifr.setAttribute('height', '1px');
		ifr.setAttribute('scrolling', 'no');
		ifr.style.border="0px";
		document.body.appendChild(ifr);
	}
	
	function directToPanorama() {
		window.location = "poi-3.html";
	}
	
</script>



	
<footer>
</footer>
</body>

</html>